<template>
  <div class="editor-info">
    <div class="input-box">
         <div class="item">
        <p>账号</p>
          <input
          type="text"
          placeholder="请输入账号"
          v-model="submitData.number"
        >
      </div>
      <div class="item">
        <p>姓名</p>
        <input
          type="text"
          placeholder="请输入姓名"
          v-model="submitData.name"
        > 
      </div> 
      <div class="item-input"> 
         <div class="imageFileBox">
           <p>收款码 <span style="font-size: 14px;color: red" @click="showPreImage">&nbsp;&nbsp;查看示例</span></p>

           <div class="imageFileInput">
             <van-uploader :after-read="onRead" >
               <div class="imgbox" style="with:80%;height: 70%">
                 <img
                   :src="this.showImage"
                   with="230px"
                   height="170px"
                   alt=""
                 >
               </div>
             </van-uploader>
           </div>
        </div>
      </div>
      <img src="../../assets/images/alipayDemo.png" width="200px" height="200px" hidden>
      <img src="../../assets/images/wechatDemo.png" width="200px" height="200px" hidden>
    </div>
    
    <!--<div class='submit'>-->
      <!--<input-->
        <!--type="submit"-->
        <!--value="添加绑定"-->
        <!--@click="submit"-->
      <!--&gt;-->
    <!--</div>-->
    
  </div>
</template>
<script>
import { ImagePreview,Toast } from 'vant';
import { uploadOss,bindingAlipay,bindingWeChat,getUserInfo } from "../../api/user";
export default {

  data() {
    return {
      start:0,
      type:'',
      submitData:{
        QRcode:"",
        number:"",
        name:"",
      },
      showImage:"",
    };
  },
  methods: {
    onRead(file) {
      let fd = new FormData();
      fd.append("file", file.file);
      uploadOss(fd).then(res => {
        if (res.status == 200) {
          this.showImage = res.url[0] //展示的
          this.submitData.QRcode = res.data[0]; //提交的

          const img = document.createElement("img");
          img.src = this.showImage;
          img.width=230
          img.height=175
          const imageBox = document.querySelector(".imgbox");
          imageBox.replaceWith(img); //appendChild
        }
      });

    },
    submit(){
      console.log(this.submitData)
      if(this.submitData.number==""){
        Toast("请添加账号");
        return;
      }
      if(this.submitData.name==""){
        Toast("请添加姓名");
        return;
      }
      if(this.submitData.QRcode==""){
        Toast("请上传图片");
        return;
      }

      if(this.type=="alipay"){
        bindingAlipay({
          AlipayReceipt_QRcode:this.submitData.QRcode,//支付宝收款码地址
          Alipay_number:this.submitData.number,//支付宝账号
          Alipay_name:this.submitData.name,//支付宝实名
        }).then(res => {
          Toast(res.message);
          if (res.status == 200) {
            setTimeout(() => {
              this.$router.push({
                path: "/cashMode"
              });
            }, 1200);
          }
        });

      }else if(this.type=="weixin"){
        bindingWeChat({
          WeChatReceipt_QRcode:this.submitData.QRcode,//微信收款码地址
          WeChat_number:this.submitData.number,//微信账号
          WeChat_name:this.submitData.name,//微信实名
        }).then(res => {
          Toast(res.message);
          if (res.status == 200) {
            setTimeout(() => {
              this.$router.push({
                path: "/cashMode"
              });
            }, 1200);
          }
        });
      }
    },
    showPreImage(){
        ImagePreview({
          images: [
            '/images/alipayDemo.png',
            '/images/wechatDemo.png',
          ],
          startPosition: this.start,
        })
      },
      init(){
        getUserInfo().then(res => {
          if(this.type=="alipay"){
            this.start = 0;
            this.submitData.QRcode = res.data.info.AlipayReceipt_QRcode
            this.submitData.number = res.data.info.Alipay_number
            this.submitData.name   = res.data.info.Alipay_name
            this.showImage = res.data.info.AlipayReceipt_QRcode
          }else if(this.type=="weixin"){
            this.start = 1
            this.submitData.QRcode = res.data.info.WeChatReceipt_QRcode
            this.submitData.number = res.data.info.WeChat_number
            this.submitData.name   = res.data.info.WeChat_name
            this.showImage = res.data.info.WeChatReceipt_QRcode
          }

        });

      }
  },
  created(){
    this.type = this.$route.query.type
    this.init();
  },
};
</script>

<style lang="scss">
.editor-info {
  width: 100%;
  padding-bottom: 48px;
  background-color: #f5f5f5;
  .van-popup {
    width: 100%;
  }
  .input-box {
      width: 100%;
      margin-top: 10px;
    .item {
      margin-bottom: 10px;
      width: 100%;
      height: 48px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      input {
        width:80%;
        outline: none;
        border: none;
      }
      p {
        width: 20%;
        font-size: 16px;
        font-weight: 450;
        text-align: left;
      }
    }
  }
  .item-input{
      margin-bottom: 10px;
      width: 100%;
      height: 260px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 15px 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
  
  /*定义图像以及大小*/
    .imageFileBox{
        width: 92%;
        height: 250px;  
        position:absolute;  
    p {
        width: 100%;
        font-size: 16px;
        font-weight: 450;
        text-align: left;
      }
      .imageFileInput{
        height: 70%;
        width:80%;
        position: absolute;
        background:#f8f8f8;
        left: 10%;
        top: 15%; 
        border:1px dotted #999; 
        border-radius:8px;
      }
      .fileInput{
          width:100%;
          height:100%; 
          opacity:0;
    }
    } 
    
  }
  .submit {
    width: 100%;
    text-align: center;
    padding: 20px 0;

    input {
      width: 90%;
      height: 40px;
      outline: none;
      border: none;
       background: rgba(241, 22, 51, 1);
      font-size: 16px;
      color: #fff;
      border-radius: 5px;
    }
  }
}
</style>

s
